<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
      <tr>
        <td style="padding-right: 10px;">
          操作类型：
          <select v-model="params.roll_type" @change="rollChange" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
            <option v-for="(roll_name,roll) in rollList" :value="roll">{{ roll_name }}</option>
          </select>
        </td>
        <td>
          <div class="datagrid-btn-separator"></div>
        </td>
        <td style="padding-right: 10px; padding-left: 10px;">
          余额/积分：
          <select v-model="params.type" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
            <option v-for="(type_name,type) in walletTypeList" :value="type">{{ type_name }}</option>
          </select>
        </td>
        <td>
          <div class="datagrid-btn-separator"></div>
        </td>
        <td style="padding-left: 10px;">
          转帐时间：
          <select v-model="params.mode" @change="filter" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
            <option v-for="(mode_name,mode) in modeList" :value="mode">{{ mode_name }}</option>
          </select>
        </td>
        <td :class="(params.mode == 'other')?'showDate':'hideDate'">
            <span style="line-height:30px;">自定义日期：</span>
            <input id="transferStartOn" v-model="params.transfer_start" style="width:110px" type="text"
                   class="easyui-datebox"> </input>至
            <input id="transferEndOn" v-model="params.transfer_end" style="width:110px" type="text"
                   class="easyui-datebox"> </input>
        </td>
        <td style="padding-left: 10px;">
          <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                  class="l-btn-text">查询</span></span></a>
          <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                  class="l-btn-text">重置</span></span></a>
          <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                  class="l-btn-text">重载</span></span></a>
          <a href="javascript:void(0);" @click="allExport" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                  class="l-btn-text">导出</span></span></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="transferStatisticsTable"></table>
</div>
<div id="transferStatisticsdlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var transferStatisticsVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        mode: 'all',
        roll_type:'rollin',
        type:'all',
        transfer_start: '',
        transfer_end: '',
      },
      defParams: {
        mode: 'all',
        roll_type:'rollin',
        type:'all',
        transfer_start: '',
        transfer_end: '',
      },
      modeList: JSON.parse('<?php echo addslashes($mode_list);?>'),
      rollList: JSON.parse('<?php echo addslashes($roll_type);?>'),
      walletTypeList: JSON.parse('<?php echo addslashes($wallet_type);?>'),
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
      
    },
    methods: {
      mounted: function (){
        $('#tb<?php echo $uniqid;?> #transferStartOn').datebox('setValue', this.params.transfer_start);
        $('#tb<?php echo $uniqid;?> #transferEndOn').datebox('setValue', this.params.transfer_end);
        this.init();
      },
      init: function () {
        if(this.params.mode === 'other'){
          this.params.transfer_start = $('#tb<?php echo $uniqid;?> #transferStartOn').datebox('getValue');
          this.params.transfer_end = $('#tb<?php echo $uniqid;?> #transferEndOn').datebox('getValue');
        }
        transferStatisticsReload();
      },
      filter() {
        if(this.params.mode !== 'other'){
          this.init();
        }
      },
      rollChange(){
        let title = '转帐统计';
        let url = '/admin/transfermanage/statistics?roll_type=' + this.params.roll_type;
        $('#rightTabs').tabs('close', title);
        addTab(title, url);
      },
      reset:function (){
        this.params = JSON.parse(JSON.stringify(this.defParams));
        this.init();
      },
      allExport:function () {
        showLoading('.con');
        $.post('/admin/transfermanage/exportstatistics', {
          roll_type: this.params.roll_type,
          type: this.params.type,
          start_on: this.params.transfer_start,
          end_on: this.params.transfer_end,
          mode: this.params.type,
        }, function (data) {
          hideLoading();
          if (parseInt(data.ret) === 0) {
            $.messager.show({
              title: '提示',
              msg: data.msg,
              timeout: 3000,
              showType: 'slide'
            });
            eventmaterialDownload(data.data);
          } else {
            $.messager.alert('提示', data.msg, 'warning');
          }
        }, 'json').fail((response)=> {
          hideLoading();
          $.messager.alert('提示', response.responseText, 'warning');
        });
      },
    }
  });

  var transferStatisticsReload = function () {
    if(transferStatisticsVm.initLoad){
      transferStatisticsVm.initLoad = false;
    }else{
      $("#transferStatisticsTable").datagrid('load', transferStatisticsVm.params);
    }
  };
  var showInfo = function (id) {
    if(id){
      if($('#rightTabs').tabs('exists', '用户转账')){
        $('#rightTabs').tabs('close', '用户转账');
      }
      let url = `/admin/transfermanage/index?dialog=1&type=${transferStatisticsVm.params.type}&keywordsType=${(transferStatisticsVm.params.roll_type === 'rollout')?'user_id':'target_id'}&keywords=${id}`;
      let inOrOutText = (transferStatisticsVm.params.roll_type === 'rollout')?'转出':'转入';
      let walletTypeText = (transferStatisticsVm.params.type === 'all')?'全部':((transferStatisticsVm.params.type === 'money')?'余额':'积分');
      let dialog_title = `${id}用户${inOrOutText}${walletTypeText}详情`;
      $("#transferStatisticsdlg").dialog({
        title: dialog_title,
        closed: false,
        width: 1200,
        height: 700,
        cache: false,
        href: url,
        modal: true,
        buttons: [{
          text: '关闭',
          iconCls: 'icon-no',
          handler: function () {
            $("#transferStatisticsdlg").dialog('close');
          }
        }],
        onOpen:function () {
          $(this).window('center');
        },
        resizable:true
      });
    }else{
      $.messager.alert('提示', '详情参数出错', 'warning');
    }
  }

  var transferStatisticsSearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#transferStatisticsTable").datagrid({
      title: '转入统计排名',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: true,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'total_trans',
      sortOrder: 'desc',
      idField: 'target_id',
      url: '/admin/transfermanage/statistics',
      queryParams: transferStatisticsVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {
          field:'get_target',title:'转入用户', width: fixWidth(20), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '';
            if(value){
              if(value.avatar){
                content += '<div style="display: flex" class="touxiang_wenzi">';
                content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
              }else{
                content += '<div class="touxiang_wenzi">';
              }
              content += '用户ID：<span>'+rowData.target_id+'</span><br>';
              if(value.realname){
                content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
              }else{
                content += '昵称：<span>'+value.nickname+'</span><br>';
              }
              content += '手机号：<span>'+value.phone+'</span>';
              if(value.avatar){content += '</div>';}
              content += '</div>';
            }else{
              return rowData.target_id+'不存在';
            }
            return content;
          }
        },
        {
          field:'wallet_type_name',title:'类型', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            return '<span class="'+ rowData.wallet_type +'_type">'+value+'</span>';
          }
        },
        {
          field: 'total_trans',title:'转入总额', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            let show = '';
            if(rowData.wallet_type === 'money'){
              show += '￥';
            }
            return show + value;
          },sortable:true
        },
        {
          field: 'trans_num',title:'转入次数', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            return value+'次';
          },sortable:true
        },
        {field: 'options', title: '操作', align: 'center', halign: 'center', width: fixWidth(8), formatter: function (value, rowData, rowIndex)
          {
            let buttons = '<div class="table">';
            buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" onclick="showInfo(\'' + rowData.target_id + '\')"><span class="l-btn-text">详情</span></span>';
            return buttons + '</div>';
          }
        },
      ]],
    });
    transferStatisticsVm.initLoad = true;
  };
  onDatagridResize("#transferStatisticsTable");
  transferStatisticsSearch();
</script>
<style>
  .log_remark > *{
    white-space: pre-wrap !important;
  }

  .showDate{
    display: block;
  }

  .hideDate{
    display: none;
  }

  .money_type{
    color: #ee650c;
  }
  .score_type{
    color: #0eb913;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
</style>
